import styled from "styled-components";
import { Canvas } from "@react-three/fiber";
import { Suspense, useState, useEffect } from "react";
import { Model } from "./components/Model";
import { Scene } from "./components/Scene";
import { Loader } from "./components/Loader";
import { GLTFLoader, GLTF } from "three/addons/loaders/GLTFLoader.js";
import * as THREE from "three";
const glbs = [
  "/Models/td-2",
  // "/Models/2.glb",
  // "/Models/3.glb",
  // "/Models/4.glb",
];
export function Space() {
  const loader = new GLTFLoader();
  const [gltfs, setGltfs] = useState<GLTF[]>([]); // 创建一个状态变量来存储加载的GLTF模型
  useEffect(() => {
    Promise.all(glbs.map((glb) => loader.loadAsync(glb))).then((gltfs) =>
      // 将加载的GLTF模型存储到状态变量中
      {
        console.log(gltfs);

        setGltfs(gltfs);
      }
    );
  }, []);
  const position = new THREE.Vector3(
    23.17573437474683,
    576.2612616752841,
    616.9265364831264
  );
  /**
   * 拷贝一份并反转位置
   */
  const positon2 = position.clone().negate();
  return (
    <Canvas
      scene={{ background: new THREE.Color("#111010") }}
      camera={{
        position,
      }}
    >
      <Suspense fallback={<Loader />}>
        {gltfs.map((item, index) => item && <Model model={item} key={index} />)}
        <Scene lightPosition={positon2} />
      </Suspense>
    </Canvas>
  );
}
